<!--此页面用于BlogView下的评论递归显示-->
<template>
  <ul style="list-style-type: none;">
    <li v-for="comment in comments" :key="comment.id">
      <div style="align-items: center;">
        <div style="display: flex;align-content: baseline">
          <!--用户头像-->
          <el-image
              :src="BASE_URL+comment.imgUrl"
              fit="cover"
              style="width: 35px; height: 35px; border-radius: 50%;">
          </el-image>
          <div style="margin-left: 10px;margin-top: 5px;color: #999;">
            <!--用户名-->
            {{ comment.userName }}
          </div>
        </div>
        <div style="margin-left: 45px">
          <!--评论内容-->
          {{ comment.content }}
        </div>
        <div style="display: flex;">
          <span style="color: #999999;font-size: 12px;align-content: center">
            <!--评论时间及用户学校-->
             {{comment.createTime}}&middot;
            {{ comment.schoolName }}
          </span>
          <div style="margin-left: 5px">
<!--            &lt;!&ndash;点赞按钮&ndash;&gt;-->
<!--            <el-tooltip content="点赞" placement="top">-->
<!--              <el-icon @click="likes(comment.id,comment.userid)" :size="20" class="custom-icon">-->
<!--                <IconGood/>-->
<!--              </el-icon>-->
<!--            </el-tooltip>-->
            <!--评论按钮-->
            <el-tooltip content="回复" placement="top">
              <el-icon @click="reply(comment.id,comment.blogId)" :size="20" class="custom-icon">
                <ChatDotSquare/>
              </el-icon>
            </el-tooltip>
          </div>
        </div>
      </div>
      <Comment v-if="comment.children && comment.children.length > 0" :comments="comment.children"/>
    </li>
  </ul>
  <!-- 评论弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"
             :before-close="handleClose"
             style="width: 1000px;padding:40px;">
    <el-form label-position="top" label-width="80px">
      <el-form-item label="评论">
        <el-input placeholder="请输入你的评论" v-model="content">
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveComment">发送</el-button>
    </template>
  </el-dialog>

</template>

<script setup>
import {ref, defineProps, onMounted, computed, nextTick} from 'vue';
import Comment from './Comment.vue';
import BlogView from './BlogView.vue';
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import IconGood from "/src/views/IconGood.vue"
import router from "@/router";

//定义监听
const emit = defineEmits(['comment-added']);
//弹窗标题
const dialogTitle = ref('回复评论');
//弹窗出现
const dialogVisible = ref(false);
//定义变量保存评论内容
const content = ref();
//定义变量保存回复评论的id
const commentId = ref();
//获取当前用户登录信息
const user = ref(getUser());
//保存当前帖子的id
const blogId = ref();
//处理弹窗关闭的方法
const handleClose = () => {
  if (confirm('确定关闭本窗口吗?')) {
    //用户确认关闭后,关闭弹窗
    dialogVisible.value = false;
    //清空已输入的表单数据
  }
}
//呼出弹窗，并获取评论id，帖子id
const reply = (cid, bid) => {
  dialogVisible.value = true;
  commentId.value = cid;
  blogId.value = bid;
  console.log(cid, '%', bid)
}
const saveComment = () => {
  if (!content.value) {
    alert('请输入评论内容');
    return;
  }
  let data = qs.stringify({
    content: content.value,
    parentId: commentId.value,
    userId: user.value.id,
    blogId: blogId.value
  })
  console.log('新增评论数据' + data);
  axios.post(BASE_URL + '/v1/comment/save', data).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('回复成功!');
      dialogVisible.value = false;//关闭弹窗
      content.value = '';//清空评论的值，否则再次打开弹窗还是之前的值
      //新增评论后，刷新页面
      emit('comment-added');
      location.reload();

    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

// 定义 props 接受评论数据
defineProps({
  comments: {
    type: Array,
    required: true
  }
});


</script>
<style scoped>


li {
  margin-bottom: 10px;
}

.custom-icon {
  padding-top: 3px;

  :hover {
    cursor: pointer;
  }
}
</style>